<template>
  <div class="all">
    <!-- 头部 -->
    <van-nav-bar
      title="黑马优购"
      :left-text="title?'':'返回'"
      :left-arrow="title?false:true"
      @click-left="onClickLeft"
      fixed
      class="header"
    />

    <!-- 收货地址按钮 -->
    <div class="shouhuo">
      <van-button v-if="!dzpd" icon="plus" type="info" @click="onSelect">选择收货地址</van-button>
      <!-- <van-address-list v-if="dzpd" v-model="chosenAddressId" :list="list" default-tag-text="默认" /> -->
      <div v-if="dzpd">
        <span class="s1">收货人：{{this.list[0].name}}</span>
        <span class="s2">联系电话：{{this.list[0].tel}}</span>
        <div class="s2-d" @click="onSelect"></div>
        <span class="s3">收货地址：{{this.list[0].dizhi}}</span>
      </div>
    </div>

    <!-- 分割线 -->
    <van-divider dashed :style="{ color: '#1989fa', borderColor: '#1989fa'} "></van-divider>

    <van-row v-for="(item) in this.lists" :key="item.good_id">
      <van-card
        :price="item.goods_price"
        :desc="item.goods_name"
        :thumb="item.goods_small_logo"
        :num="item.num"
      />
    </van-row>

    <div>
      <!-- 登陆后下单按钮 -->
      <van-button v-show="!pd" type="primary" class="dengluo" @click="gologin">登陆后下单</van-button>
      <!-- 提交购买 -->
      <van-button v-show="pd" type="warning" class="dengluo" @click="goumai">购买</van-button>
    </div>
    <van-popup v-model="show" position="top" :style="{ height: '20%' }">
      <h1 :style="{color:'orangered' ,textAlign: 'center', lineHeight: '3rem'}">购买成功!</h1>
    </van-popup>
    <van-popup v-model="show1" position="top" :style="{ height: '20%' }">
      <h1 :style="{color:'orangered' ,textAlign: 'center', lineHeight: '3rem'}">您还没有添加商品，请再去看看!</h1>
    </van-popup>
  </div>
</template>

<script>
// import header from '../util/header'
export default {
  props: ['title'],
  data() {
    return {
      show: false,
      show1: false,
      chosenContactId: null,
      chosenAddressId: '0',
      username: '',
      pd: '',
      lists: [],
      list: [],
      dzpd: false,
      id: '',
      val: []
      // listzhen: []
    }
  },

  created() {
    this.getOrderList()
  },
  computed: {},
  components: {
    // 'row-vet': header
  },

  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    //
    getOrderList() {
      this.username = window.localStorage.getItem('uname', this.username)
      this.pd = this.username === null ? false : true
      // console.log(this.pd)
      // console.log(this.username)
      this.lists = JSON.parse(localStorage.getItem('newgood'))
      // this.list = JSON.parse(localStorage.getItem('addressInfo'))
      // this.dzpd = this.list === null ? true : false
      this.val = JSON.parse(localStorage.getItem('addressInfo'))
      if (this.val !== null) {
        console.log(this.$route.query.id)
        this.id = this.$route.query.id
        const index = this.val.findIndex(item => item.id === this.id)
        console.log(index)
        if (index !== -1) {
          this.dzpd = true
          console.log(this.val[index])
          this.list.push(this.val[index])
          this.list[0].dizhi =
            this.list[0].province +
            this.list[0].city +
            this.list[0].county +
            this.list[0].addressDetail
          window.localStorage.setItem('qgyddz', JSON.stringify(this.list[0]))
        }
      }
    },
    // 选则联系人
    onSelect() {
      this.$router.push('/addresslist')
    },
    gologin() {
      this.$router.push('/login')
    },
    goumai() {
      if (this.lists !== null) {
        this.show = true
        localStorage.removeItem('newgood')
        localStorage.removeItem('goshop')
        this.getOrderList()
      } else {
        this.show1 = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  background-color: #c73420;
}
.van-nav-bar__title,
.van-nav-bar__text,
.van-icon {
  color: #fff !important;
}
.all {
  height: 100%;
  .dengluo {
    position: absolute;
    bottom: 0;
    width: 8rem;
    margin-left: 1rem;
  }
}
.title {
  background-color: #c73420;
  height: 1rem;
  .title_hm {
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    font-family: '微软雅黑';
    font-size: 0.5rem;
  }
}
.shouhuo {
  position: relative;
  margin-top: 46px;
  height: 2.5rem;
  line-height: 2.8rem;
  .van-button {
    margin-left: 3.2rem;
  }
  span {
    font-size: 16px;
  }
  .s1 {
    position: absolute;
    top: -20px;
    left: 10px;
  }
  .s2 {
    position: absolute;
    top: -20px;
    right: 30px;
  }
  .s2-d {
    position: absolute;
    top: 30px;
    right: 15px;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
  }
  .s3 {
    position: absolute;
    top: 20px;
    left: 10px;
  }
}
.p {
  font-size: 20px;
}
</style>
